<template>
  <div class="details__container__desc">
    <div class="product">
      <h2>Product Description</h2>
      <p>
        A mango is an edible stone fruit produced by the tropical tree Mangifera
        indica which is believed to have originated from the region between
        northwestern Myanmar, Bangladesh, and northeastern India.
      </p>
    </div>
    <div class="reviews">
      <h2>reviews</h2>
      <ul>
        <ReviewItem />
      </ul>
    </div>
  </div>
</template>

<script setup>
import ReviewItem from "./ReviewItem.vue";
</script>

<style lang="scss">
.details__container__desc {
  width: 100%;
  margin-bottom: 20rem;

  .product {
    p {
      font-size: 12rem;
      line-height: 14rem;
      margin: 10rem 0;
    }
  }

  .reviews {
    margin-top: 20rem;

    ul {
      margin-top: 8rem;
      @include flex($ai: center);
      flex-wrap: nowrap;
      overflow: scroll;
    }
  }
}
</style>
